
//获取数据
function renderCategory() {
    $.ajax({
        url: '/my/category/list',
        success: function (res) {
            //console.log(res);
            let str = '';
            res.data.forEach(function (item) {
                str += `
                <tr>
                <td>${item.name}</td>
                <td>${item.alias}</td>
                <td>
                    <button type="button" data-id="${item.id}" data-name="${item.name}" data-alias="${item.alias}" class="layui-btn layui-btn-normal layui-btn-xs">编辑</button>
                    <button type="button" data-id="${item.id}" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>

                </td>
                </tr>
                `
            });
            $('tbody').html(str);

        }
    })
};
renderCategory();

// ------ 删除列表功能  采用事件委托的方法--------------


$('tbody').on('click', 'button:contains("删除")', function () {
    //data()方法获取自定义属性的方法
    let id = $(this).data('id');
    // console.log(id);
    layer.confirm('确定删除?', function (index) {
        //do something
        $.ajax({
            url: '/my/category/delete',
            data: {
                id: id//这个id是$(this).data('id')获取的值
            },
            success: function (res) {
                layer.msg(res.message);
                if (res.status === 0) {
                    renderCategory();
                }
            }
        })
        layer.close(index);
    })

});


//  ------------------添加类别------------------------
let addIndex;
$('button:contains("添加类别")').on('click', function () {
    addIndex = layer.open({
        type: 1,
        title: '添加类别',
        content: $('#tpl-add').html(),
        area: ['500px', '300px'],
    });
});

//表单提交, 用事件委托

$('body').on('submit', '#add-form', function (e) {
    console.log(1);
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: '/my/category/add',
        data: $(this).serialize(),
        success: function (res) {
            layer.msg(res.message);
            if (res.status === 0) {
                renderCategory();
                layer.close(addIndex);
            }
        }
    })
})

// ----------------修改-----------------

let editIndex;
// 点击编辑弹出框要用事件委托
// 还需要数据回填
/* 数据通过编辑button标签绑定自定义属性的值拿过来 */
$('tbody').on('click', 'button:contains("编辑")', function () {
    // 所以通过data()的方式拿到 data-XXX的属性值
    let data = $(this).data();
    //console.log(data);
    editIndex = layer.open({
        type: 1,
        title: '编辑类别',
        content: $('#tpl-edit').html(),
        area: ['500px', '300px'],
        //弹出出现后执行的函数,完成数据回填
        success: function () {
            // 注册模块
            let form = layui.form;
            //form.val('form的lay-filter属性值','对象形式的数据')
            form.val('edit', data);
        }
    });

    $('body').on('submit', '#edit-form', function (e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '/my/category/update',
            data: $(this).serialize(),
            success: function (res) {
                layer.msg(res.message);
                if (res.status === 0) {
                    renderCategory();
                    layer.close(editIndex)
                }
            }
        })
    })
});